<script lang="ts" setup>
const isCollapse = ref(true);
</script>
<template>
  <div>
    <el-container>
      <el-header> Picx </el-header>
      <el-container class="flex">
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu default-active="pic" :collapse="isCollapse" router>
              <el-menu-item index="pic">
                <i-ep-Picture />
                <template #title> 图片管理 </template>
              </el-menu-item>
              <el-menu-item index="upload">
                <i-ep-UploadFilled />
                <template #title> 图片上传 </template>
              </el-menu-item>
              <el-menu-item index="category">
                <i-ep-List />
                <template #title> 分类管理 </template>
              </el-menu-item>
              <el-menu-item index="subscriber">
                <i-ep-User />
                <template #title> 用户管理 </template>
              </el-menu-item>
              <el-menu-item index="statistics">
                <i-ep-Histogram />
                <template #title> 数据统计 </template>
              </el-menu-item>
              <el-menu-item index="system">
                <i-ep-Setting />
                <template #title> 系统信息 </template>
              </el-menu-item>
              <el-menu-item @click="isCollapse = !isCollapse" index="#">
                <div v-if="isCollapse">
                  <i-ep-Expand />
                </div>
                <div v-else>
                  <i-ep-Fold />
                </div>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main class="flex-1">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped></style>
